<template>
  <div class="mainHome">
    <el-row class="home" :gutter='20'>
      <el-col :span="8" >
        <el-card class='box-card' shadow='hover'>
           <div class="b-top">
              <img :src="userImg" alt="" class="img-top">
              <div class="word">
                <h2>Admin</h2>
                <span>超级管理员</span>
              </div>
           </div>
           <hr>
           <div class="b-foot">
                <span>上次登录时间 ： </span> <br>
                <span>上次登录地点 ：</span>
           </div>
        </el-card>
      </el-col>      
    </el-row>

    <el-row class="home" :gutter='20'>
      <el-col :span='8' style="margin-top:20px">
        <el-card class='box-card' shadow='hover'>
            <el-table   :data="tableData">
                <el-table-column prop ='brand' label="品牌"></el-table-column>
                <el-table-column prop='total' label="总租赁数"></el-table-column>
                <el-table-column  prop="nowHire" label="本月租赁数"></el-table-column>
            </el-table>
        </el-card>
      </el-col>
    </el-row>                
  </div>
</template>

<script>
export default {
  name : 'homeView',
  data() {
    return {
      userImg : require('@/assets/images/z2.jpg'),
      tableData:[
        {
          brand:'雅迪',
          total : '20000',
          nowHire : '2000'
        },
        {
          brand:'雅迪',
          total : '20000',
          nowHire : '2000'
        },
        {
          brand:'雅迪',
          total : '20000',
          nowHire : '2000'
        },
        {
          brand:'雅迪',
          total : '20000',
          nowHire : '2000'
        }
      ]
    }
  },
 

}
</script>

<style scoped>
.b-top{
  display: flex;
  justify-content: space-around;
}
.img-top{
    width:100px;
    height: 100px;
    border-radius: 50%;    
    /* margin: 0px; */
    /* float: left; */
}
.b-foot{
    display: inline-block;       
    font-size: 12px;   
    /* margin-bottom: 10px; */
    color: grey;        
}
  
</style>
